<template>
    <div>
        <div class="search-box">
            <van-icon name="arrow-left" @click="goHome" size='1.5rem' color='#c3af9b' style='margin-left: 10px;line-height: 50px;'/>
            <input type="text" placeholder="lns风配饰" 
            style='width: 75%;height: 60%;border: none;border-radius: 2rem;text-indent: 20px;font-size: 12px;margin-top: 10px;margin-right: 10px;'/>
            <button style="width:15%;height:60%;border-radius: 2rem;font-size: 12px;margin-top: 10px;border: none;background-color: #c1ab96;color: white;">搜索</button>        
        </div>
        <div class="historSea">
            <div style="margin-top:10%;margin-left:5%;margin-bottom: 5%;">
                <b style="font-size:16px">历史搜索</b>
                <van-icon name="delete-o" style='margin-left: 70%;' @click="dialogVisible = true"/>
            </div>
            <el-dialog
                v-model="dialogVisible"                
                width="50%"
                :before-close="handleClose"
            >
                <span>确认删除所有内容?</span>
                <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="del"
                    >确认</el-button
                    >
                </span>
                </template>
            </el-dialog>
            <!-- <router-link to="/proDetails"> -->
            <div class="hx">
            
               <button 
               v-for="item in hh"
               @click="toDetails"               
               style="height:1.5rem;padding:0px 10px;background-color: #f8e6d3;color: white;border-radius: 2rem;
               border: none;font-size: 0.5rem;margin-top: 3%;">
               {{item}}</button>
            
            </div>
            <!-- </router-link> -->            
        </div>
        <div class="exploreFo">
            <div style="margin-top:10%;margin-left:5%;margin-bottom: 5%;">
                <b style="font-size:16px">探索发现</b>
                <van-icon name="eye-o" style='margin-left: 70%;'/>                
            </div>
            <router-link to="/proDetails">
            <div class="fx">
                <div 
                style="width: 40%;height: 2rem;font-size: 0.5rem;line-height: 2rem;"
                v-for="item in ff"
                :key="item"
                >
                {{item}}
                </div>
                           
            </div>
            </router-link>   
                    
        </div>

    </div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { getFound } from '@/api/search'
import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox } from 'element-plus'

let $router = useRouter();

let goHome = () =>{
    $router.push({path:'/homePage'})    
}

let toDetails = () =>{    
    $router.push({path:'/proDetails'})
}

const dialogVisible = ref(false)

const del = ()=>{
    dialogVisible.value = false;
    hh.value = []
}



const handleClose = (done: () => void) => {
  ElMessageBox.confirm('是否关闭窗口?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}


    // hh.value = []

let hh = ref(['宽松','女 性冷淡','lns风','简约','优衣库','宣家','北欧风格','瑞士','纯白色'])

let ff = ref([])

onMounted(()=>{
    // console.log(111);
    getFound()
    .then((res:any)=>{
        ff.value = res.data.data
        console.log(ff);        
    })
})
</script>
<style scoped>
    .search-box{
        width: 100%;
        height: 50px;      
        display: flex;
        justify-content: center;
        background-color: #eae9e5;
    }
    .hx{
        margin-left: 5%;
        width: 70%;
        display: flex;
        flex-wrap: wrap;        
        justify-content: space-between;
    }
    .fx{
        margin-left: 5%;
        display: flex;
        flex-wrap: wrap;
    }
</style>